<template>
   <div class="addclassify">
      <div class="pss">
         请分配管理员权限 (每一个管理员都需要单独设置权限，默认无权限！)
      </div>
      <div class="guanliuserlist">
         <div class="lefts">
            <div style="display: flex;">
               <button style="background: #1b5fa1;">管理员列表</button>
               <button style="background: #df890b;margin: 0;">拥有特殊权限的成员列表</button>
            </div>
            <div class="user-left">
               <div class="userlists" v-for="(item, index) in SystemData.SystemInfo.systemAuth" :key="index"
                  @click="ClickAuthUser(item, index)" :class="{ userlistActive: state.userlistActive === index }">
                  <el-image style="width: 100%; height: 100%" :src="item.useravatar" fit="cover" />
                  <div class="name">{{ item.username }}</div>
                  <el-dropdown>
                     <span class="el-dropdown-link">
                        <button style="background: #1b5fa1;margin: 0;"
                           v-if="SystemData.SystemInfo.systemCreateUser._id === userinfo._id">分配权限</button>
                        <button style="background: #1b5fa1;margin: 0;" v-else>管理员</button>
                     </span>
                     <template #dropdown>
                        <el-dropdown-menu>
                           <el-dropdown-item @click="delsystemAdmin(item._id)">移出管理员</el-dropdown-item>
                           <el-dropdown-item @click="delsystemAdmin(item._id)">退出社区</el-dropdown-item>
                        </el-dropdown-menu>
                     </template>
                  </el-dropdown>
               </div>
               <div class="NosystemAuth" v-if="SystemData.SystemInfo.systemAuth.length === 0">
                  <div>没有管理员</div>
                  <div>系统成员管理 > 添加管理员</div>
               </div>
            </div>
         </div>
         <div class="user-right">
            <el-alert title="请慎重合理分配权限，避免发生不可复的事件！" type="info" effect="dark" />
            <el-checkbox-group v-model="state.systemUser.systemUserAuth" class="allauthlist">
               <el-checkbox v-for="(item, index) in Authlist" :key="item.model" :model-value="item.model"
                  :label="item.model" size="large">{{ item.label }}</el-checkbox>
            </el-checkbox-group>
         </div>
      </div>
   </div>
   <button class="save" @click="updateAuth">确认权限</button>
</template>
<script lang="ts" setup >
import { storeToRefs } from 'pinia';
import { ElMessage } from "element-plus";
const { userinfo } = storeToRefs(cnyzsUserpinia())

const props = defineProps({
   SystemData: {
      type: Object,
      default: {
         SystemInfo: {},
         SystemConfig: {},
         SystemAnnounceList: [],
         SystemUserInfo: [],
         SystemUserList: [],
         SystemClassifyList: [],
         SystemPostsList: [],
      }
   }
})

// 获取权限字段列表
const Authlist: any = ref({})
const getAuthlist = async () => {
   const res: any = await cnyzsRequest('/api/cnyzs-system-config/authlist', { method: 'POST' })
   Authlist.value = res.data
}
getAuthlist()



// 响应数据
const state = ref({
   userlistActive: -1,
   systemUser: {} as any,
})

// 获取指定系统成员信息
const ClickAuthUser = async (authinfo: any, index: number) => {
   state.value.userlistActive = index
   const res: any = await cnyzsRequest('/api/cnyzs-system-user/info-id', {
      method: 'POST', data: {
         systemId: props.SystemData.SystemInfo._id, // 系统ID
         userId: authinfo._id // 主程序用户ID
      }
   })
   if (res.status !== 200) return ElMessage.warning(res.message)
   state.value.systemUser = res.data
}
// 确认修改系统管理权限 
const updateAuth = async () => {

   // 判断是否选择了人员
   if (!state.value.systemUser._id) {
      return ElMessage.warning('请选择修改对象')
   }
   const res: any = await cnyzsRequest('/api/cnyzs-system-user/update-admin-auth', {
      method: 'POST', data: {
         systemId: props.SystemData.SystemInfo._id, // 系统ID
         systemUser: state.value.systemUser // 系统管理员用户信息
      }
   })
   if (res.status !== 200) return ElMessage.warning(res.message)
   ElMessage.success(res.message)
}
// 删除系统管理员
const delsystemAdmin = async (userId: string) => {
   const res: any = await cnyzsRequest('/api/cnyzs-system-user/del-admin', {
      method: 'POST', data: {
         systemId: props.SystemData.SystemInfo._id,
         userId: userId
      }
   })
   if (res.status === 200) return ElMessage.success(res.message)
   ElMessage.error(res.message)
}


</script>
<style lang="scss" scoped>
button {
   background: #419643;
   border: 0;
   box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.2);
   color: #fdfdfd;
   cursor: pointer;
   display: flex;
   align-items: center;
   font-size: 14px;
   font-weight: 600;
   height: 35px;
   justify-content: center;
   margin-right: 15px;
   padding: 0 15px;
   transition: all 0.2s;
   border-radius: 8px;

   &:hover {
      opacity: .8;
   }
}

input {
   width: 570px;
   height: 45px;
   border: 0;
   font-size: 16px;
   background-color: #FFF;
   border-bottom: 1px solid #f5f6f7;
   caret-color: var(--aoir-color-primary-2);
   padding: 0 10px;
   border-radius: var(--aoir-border-radius);
   box-shadow: 0 0 35px 0 rgb(108 108 108 / 10%);

   &::placeholder {
      color: #CCD0DB;
   }
}

.addclassify {
   overflow: hidden;

   .pss {
      color: #999;
      font-size: 12px;
      margin-bottom: 15px;
   }

   .guanliuserlist {
      flex: 1;
      display: flex;
      justify-content: space-between;

      .lefts {

         .user-left {
            width: 374px;
            height: max-content;
            height: 535px;
            display: flex;
            flex-wrap: wrap;
            align-content: flex-start;
            overflow: auto;
            padding: 32px;

            &::-webkit-scrollbar {
               display: none;
            }

            .userlists {
               width: 140px;
               height: 170px;
               margin-right: 15px;
               display: flex;
               flex-direction: column;
               align-items: center;
               margin-bottom: 15px;
               padding: 15px;
               border-radius: 10px;
               background-color: #f5f5f588;
               border: 2px solid #EEE;
               cursor: pointer;
               box-shadow: 0 0 35px 0 rgb(108 108 108 / 21%);
               transition: all .3s;

               &:hover {
                  transform: translateY(-5px);
                  // border: 2px solid var(--aoir-color-primary);
                  opacity: .8;
               }

               .el-image {
                  width: 70px !important;
                  height: 70px !important;
                  border-radius: 10px;
                  box-shadow: 0 0 35px 0 rgba(108, 108, 108, 0.56);
               }

               .name {
                  margin: 8px 0;
                  font-size: 14px;
               }

               .set {
                  font-size: 15px;
                  padding: 5px 14px;
                  color: #FFF;
                  border-radius: 4px;
                  background-color: var(--aoir-color-primary);
               }
            }

            .userlistActive {
               border: 2px solid var(--aoir-color-primary);
            }

            .NosystemAuth {
               width: 100%;
               height: 250px;
               display: flex;
               flex-direction: column;
               justify-content: center;
               align-items: center;
               background-color: rgb(255 255 255 / 77%);
               border-radius: var(--aoir-border-radius);
               box-shadow: 0 0 35px 0 rgb(108 108 108 / 9%);
            }
         }
      }


      .user-right {
         flex: 1;
         height: 100%;
         // background-color: #333;

         .allauthtitle {
            font-weight: 700;
            color: var(--aoir-color-primary-2);
            margin-bottom: 15px;
         }

         .allauthlist {
            display: flex;
            flex-direction: column;
            margin-top: 30px;

            .el-checkbox {
               color: #444;
               font-weight: 600;
               text-shadow: 2px 2px 5px #4a4a4a61;
            }
         }
      }
   }

   .guanliyuanlist {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;

      .addclassify {
         width: 100%;
         // height: 100%;
         display: flex;
         flex-direction: column;
      }


   }
}

.save {
   position: absolute;
   right: 30px;
   bottom: 30px;
   border: 0;
   padding: 8px 16px;
   background-color: var(--aoir-color-primary);
   color: #FFF;
   border-radius: 6px;
   cursor: pointer;
   transition: all .2s;
   display: flex;
   align-items: center;
   box-shadow: 0 0 50px 0 rgba(74, 74, 74, 0.187);
   margin-left: 15px;
   font-size: 15px;
   z-index: 10;

   &:hover {
      opacity: .7;
   }
}
</style>